<template>
  <div ref="ChinaRef" class="chinaMap">ChinaMap</div>
</template>

<script lang="ts">
export default {
  name: "ChinaMap",
};
</script>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import china from "./china.json";
echarts.registerMap("china",china);
const data=china.features.map((item)=>{
  return{
    name:item.properties.name,
    value:Math.round(Math.random()*10000)
  }
})
const ChinaRef=ref()
onMounted(()=>{


const myEcharts=echarts.init(ChinaRef.value)
const option={
  series:{
    data,
    type:'map',
    map:'china',
    label:{
      show:true
    }

  },
  visualMap: {
      type: "piecewise",
      pieces: [
        { min: 10000 }, 
        { min: 1000, max: 9999 },
        { min: 100, max: 999 },
        { min: 10, max: 99 },
        { min: 1, max: 9 },
        { value: 0 },
      ],
    },
}

myEcharts.setOption(option)
})
</script>

<style scoped>
.chinaMap{
  widows: 100%;
  height: 500px;
}

</style>